<template>
  <div class="myOrder">
    <Card>
    <Divider>订单查询</Divider>
    <Card style="width:100%">
      <div style="text-align:center">
        <Table :data="myOrderData" :columns="myOrderColumns" stripe></Table>
        <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
      </div>
    </Card>
    </Card>
    <Modal
      v-model="show"
      title="订单详情"
      @on-ok="ok"
    >
      <lookJobModel :rowData = rowData></lookJobModel>
    </Modal>

  </div>
</template>

<script>
  import axios from 'axios';
  import lookJobModel from "./lookJobModel";
  export default {
    name: "myOrder",
    components:{
      lookJobModel
    },
    data() {
      return {
        total:0,
        show:false,
        rowData:{},
        myOrder:{
          pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          userId:'',
          orderId:'',
          jobId:'',
          jobState:'',
          createTime:null,
          finishTime:null,
          jobStaff:'',
        },
        myOrderData:[
          {
          userId:'',
          jobId:'',
          createTime:null,
          finishTime:null,
          jobStaff:'',
            jobState:'',
        },
        ],
        myOrderColumns:[
          {
            title: '订单编号',
            key: 'jobId'
          },
          {
            title: '订单状态',
            key: 'jobState',
            render: (h, params) => {
              let state = '';
              if (params.row.jobState=='0'){
                this.state = '审核中'
              }else if(params.row.jobState=='1'){
                this.state = '未接受'
              }else if(params.row.jobState=='2'){
                this.state = '已接受'
              }else if(params.row.jobState=='3'){
                this.state = '已完成'
              }else{
                this.state = '未完成'
              }
              return h('div', [
                h('div', {
                }, this.state),
              ]);
            }
          },
          {
            title: '订单创建时间',
            key: 'createTime'
          },
          {
            title: '订单完成时间',
            key: 'finishTime',
            render: (h, params) => {
              let state = '';
              if (params.row.finishTime==null){
                this.state = '未完成'
              } else {
                this.state = params.row.finishTime
              }
              return h('div', [
                h('div', this.state),
              ]);
            }
          },
          {
            title: '任务接受者',
            key: 'jobStaff',
            render: (h, params) => {
              let state = '';
              if (params.row.jobStaff == null) {
                this.state = '未接受'
              } else {
                this.state = params.row.jobStaff
              }
              return h('div', [
                h('div', this.state),
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      this.rowData = params.row
                      if (params.row.jobState=='0'){
                        this.rowData.jobState = '审核中'
                      }else if(params.row.jobState=='1'){
                        this.rowData.jobState = '未接受'
                      }else if(params.row.jobState=='2'){
                        this.rowData.jobState = '已接受'
                      }else if(params.row.jobState=='3'){
                        this.rowData.jobState = '已完成'
                      }else{
                        this.rowData.jobState = '未完成'
                      }
                      if (params.row.jobStaff==null){
                        this.rowData.jobStaff = '未接受'
                      }
                      if (params.row.finishTime==null){
                        this.rowData.finishTime = '未完成'
                      }
                      this.show = true

                    }
                  }
                }, '查看'),
                // h('Button', {
                //   props: {
                //     type: 'error',
                //     size: 'small'
                //   },
                //   on: {
                //     click: () => {
                //       // this.remove(params.index)
                //     }
                //   }
                // }, '取消')
              ]);
            }
          }
        ],
      }
    },
    methods: {
      getOrderData(){
        axios.get('http://localhost:8888/orderController/queryOrderById',{params: this.myOrder}).then(res =>{
          this.myOrderData =res.data.list
          this.total = res.data.total
        })
      },
      changePage(v){
        this.myOrder.pageNumber = v
        this.getOrderData()
      },
      ok(){
        this.show = false
      }
    },
    mounted() {
      this.myOrderData=[{
        pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          userId:' ',
          orderId:' ',
          jobId:'',
          orderState:'',
          createTime:null,
          finishTime:null,
          jobStaff:'',
          gold:'',
      }]
      this.myOrder.userId = this.$getCookie("userId")
      this.getOrderData()
    }
  }
</script>

<style scoped>
  .myOrder{
    margin:20px 0 0 20px
  }
</style>
